<template>
    <div id="add-tagline">
        <ul class="select" v-show="show">
          <li @click="contentevent(index)" v-for="(item, index) in oftenlist" :key="index">{{item}}</li>   
        </ul>
        <div class="backcolor" v-show="show" @click="background"></div>
        <div class="oftenuse"><p @click="textevent">常用文案</p></div>
        <group  class="weui-cells_form">
          <x-input  class="weui-vcode" :max="16" v-model="value" placeholder="请输入需要加入的文案，最多16个字">
            <x-button slot="right" type="primary" @click.native="choosecolor" mini>选择颜色</x-button>
          </x-input>
        </group>
        <div class="imgtemplate">
          <div class="img-move" >
            <div class="drag-move" @touchmove="touch" @mouseup="mouseup" @touchend="touchend" @mousedown="mousedown" @touchstart="touchstart" @mousemove="mousemove" id="drag" :style="{top: positiony + 'px',left: positionx + 'px' }" >
              <div id="div-input">
              <input type="text" :max="16" @blur="inputblur" @focus="inputfocus" v-model="value" :style="{color:stylecol}" id="input-val"  v-show="!inputshow" />
              <p v-show="inputshow" id="content" @click="showval" :style="{color:stylecol}"><span>{{value}}</span></p>
              <icon @click.native.stop="iconevent" type="clear" ></icon>
              </div>
            </div>
              <img class="addimg" id="imgtouch" :src="backlogoUrl" />
          </div>
           <div class="code-adcode">
            <div class="float-code">
              <qrcode :fg-color="'#000'" v-show="!qrcodeShow" v-model="codeurl" type="img" class="img_qr"></qrcode>
              <qrcode-addtag  v-show="qrcodeShow" :logo="logo" :codeurl="codeurl" ></qrcode-addtag>
            </div>
            <div class="float-code"><p>[{{titleVal}}] 闪电放款  无抵押  无担保</p><p>长按识别图中二维码<br/>即可查看详情</p></div>
            <p class="clear"></p>
          </div>
        </div>
        <share-float :shareshow="shareshow" :friends="friends" v-on:sharefriends="hideshare"></share-float>
        <div class="share" @click="share">分享并保存</div>
        <div v-transfer-dom  class="picker">  
          <popup v-model="show2" height="300px" @on-first-show="resetScroller">
            <scroller height="300px" lock-x  ref="scroller">
              <div>
                <p v-for="(i,index) of colorlist" :key="index"  @click="colorevent(index)"><span></span><span>{{i}}</span></p>
              </div>
            </scroller>
          </popup>
        </div>
    </div>
</template>
<script>
import { Group, XInput, XButton, TransferDom, Popup, Scroller, Icon, Qrcode } from 'vux'
import ShareFloat from '../comment/ShareFloat'
import QrcodeAddtag from '../comment/QrcodeAddtag'
import api from '../api'
import utils from '../utils'
var nx, ny, dx, dy, x, y
var cur = {
  x: 0,
  y: 0
}
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      qrcodeShow: true,
      logo: '',
      addJson: {},
      oftenlist: [
        '贷款用读秒 最快当天批',
        '贷款还送钱 现金等你捞',
        '别让你的梦想等太久',
        '梦想实现要趁早',
        '咦！这个人肯帮你',
        '专治各种手头紧！'
      ],
      show: false,
      show2: false,
      shareshow: false,
      friends: false,
      inputshow: true,
      flag: false,
      focusshow: true,
      codeurl: '',
      value: '', // 填入的文案内容
      stylecol: '#ffff00',
      titleVal: '',
      fromval: '',
      img_id: '', // 保存后id
      partnerIdempty: '', // 合作方Id两种情况
      positionx: null,
      positiony: null,
      Noshare: true, // 初始化分享
      backlogoUrl: '', // 背景图片
      colorlist: ['红色', '橙色', '黄色', '绿色', '蓝色', '紫红色', '白色', '黑色'],
      stylecolor: [
        {
          a: '#ff0000',
          b: '#ff6600',
          c: '#ffff00',
          d: '#1efa1e',
          e: '#0000ff',
          f: '#ff0066',
          j: '#ffffff',
          k: '#000000'
        }
      ]
    }
  },
  components: {
    Group,
    XInput,
    XButton,
    Popup,
    Scroller,
    Icon,
    Qrcode,
    ShareFloat,
    QrcodeAddtag
  },
  watch: {
    value () {
      this.move()
    }
  },
  created () {
    this.Noshare = false
    window.document.title = '添加宣传语'
    this.addJson = JSON.parse(this.$store.state.pictureStore)
    if (this.addJson.judge === '0') {
      if (this.addJson.partnername) {
        this.titleVal = this.addJson.partnername
      } else {
        this.titleVal = '悠闲贷'
      }
    } else{
      this.titleVal = '悠闲贷'
    }
    this.backlogoUrl = this.addJson.addtaglineimg
    this.partnerIdempty = this.addJson.imgpartnerid
    if (this.partnerIdempty && this.partnerIdempty !== 'null' && this.partnerIdempty !== '' && this.partnerIdempty !== undefined && this.partnerIdempty !== null && this.partnerIdempty !== 'undefined') {
      this.codeurl = this.$store.state.Url + '/creditLogin/index?shareParam=share&userId=' + this.$store.state.userID + '&picId=' + this.addJson.imgid + '&partnerId=' + this.partnerIdempty + '&channel=6'
    } else {
      this.codeurl = this.$store.state.Url + '/creditLogin/index?shareParam=share&userId=' + this.$store.state.userID + '&picId=' + this.addJson.imgid + '&channel=6'
    }
    if (this.addJson.qrCodeLogoIsShow) {
      this.qrcodeShow = true
      // this.logo = this.addJson.logoUrl
      this.logo = this.$store.state.logoUrl + this.addJson.imgpartnerid + '.png'
    } else {
      this.qrcodeShow = false
    }
    utils.jssdkwx(api, this.$wechat, this.$store, this.Noshare)
  },
  methods: {
    showval () {
      this.inputshow = false
    },
    inputblur () {
      this.focusshow = true
      this.inputshow = true
    },
    inputfocus () {
      var element = document.getElementById('drag')
      var inputval = document.getElementById('input-val')
      inputval.style.left = element.offsetLeft + 'px'
      inputval.style.top = element.offsetTop + 'px'
      this.focusshow = false
    },
    down () {
      var element = document.getElementById('drag')
      this.flag = true
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      cur.x = touch.clientX
      cur.y = touch.clientY
      dx = element.offsetLeft
      dy = element.offsetTop
    },
    move () {
      event.preventDefault()
      var element = document.getElementById('drag')
      var imgel = document.getElementById('imgtouch')
      var input = document.getElementById('content')
      var divinput = document.getElementById('div-input')
      var inputval = document.getElementById('input-val')
      var widthmove = imgel.clientWidth - input.clientWidth
      var heightmove = imgel.clientHeight - input.clientHeight
      if (this.flag === true) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        nx = touch.clientX - cur.x
        ny = touch.clientY - cur.y
        x = dx + nx
        y = dy + ny
        if (x <= widthmove && x >= 0 && y >= imgel.offsetTop && y <= heightmove) {
          element.style.left = x + 'px'
          element.style.top = y + 'px'
        }
      }
      var Regchina = /[\u4e00-\u9fa5]/
      var Regnum = /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}/
      var valueLength
      if (Regnum.test(this.value)) {
        valueLength = 13
      } else if (Regchina.test(this.value)) {
        valueLength = 21
      }
      var right = imgel.clientWidth - divinput.getBoundingClientRect().left - this.value.length * valueLength
      var widthbox = imgel.clientWidth - divinput.getBoundingClientRect().left
      if (right > 0 && this.value.length * valueLength >= 100) {
        input.style.width = this.value.length * valueLength + 'px'
        divinput.style.width = this.value.length * valueLength + 'px'
        inputval.style.width = this.value.length * valueLength + 'px'
      } else if (right < 0 && widthbox >= 100) {
        input.style.width = widthbox + 'px'
        divinput.style.width = widthbox + 'px'
        inputval.style.width = widthbox + 'px'
      }
    },
    mousedown () {
      this.down()
    },
    touchstart () {
      this.down()
    },
    mousemove () {
      if (this.focusshow === true) {
        this.move()
      }
    },
    mouseup () {
      this.flag = false
    },
    touchend () {
      this.flag = false
    },
    touch (e) {
      if (this.focusshow === true) {
        this.move()
      }
    },
    share () {
      this.Noshare = true
      var self = this
      this.shareshow = true
      var savenum = ''
      var timeStamp = String(Number(new Date()))
      var element = document.getElementById('drag')
      var imgel = document.getElementById('imgtouch')
      var difference = element.offsetTop - imgel.offsetTop
      var positionleft = element.getBoundingClientRect()
      var string = positionleft.left + ',' + difference
      var tokenvalue = utils.AuthToken(timeStamp, this.$store.state.userkey)
      if (this.addJson.judge === '0') {
        savenum = '0'
      } else if (this.addJson.judge === '1') {
        savenum = '1'
      }
      api.save({
        token: tokenvalue,
        timestamp: timeStamp,
        userId: this.$store.state.userID,
        imageUrl: this.backlogoUrl,
        postion: string,
        imageText: this.value,
        imageTextColor: this.stylecol,
        partnerId: this.partnerIdempty,
        imageFrom: savenum
      }).then(res => {
        console.log(res)
        if (res.status === '200') {
          self.img_id = res.data.id
          self.WXsharecontent()
          utils.refreshShare(self.$wechat, self.$store)
        }
      })
    },
    hideshare () {
      this.shareshow = false
    },
    resetScroller () {
      this.$nextTick(() => {
        this.$refs.scroller.reset()
      })
    },
    textevent () {
      this.show = !this.show
    },
    background () {
      this.show = !this.show
    },
    iconevent () {
      var input = document.getElementById('content')
      var divinput = document.getElementById('div-input')
      var inputval = document.getElementById('input-val')
      divinput.style.width = 100 + 'px'
      input.style.width = 100 + 'px'
      inputval.style.width = 100 + 'px'
      this.value = ''
    },
    contentevent (index) {
      this.show = !this.show
      this.value = this.oftenlist[index]
      var divinput = document.getElementById('div-input')
      var divcontent = document.getElementById('content')
      var inputval = document.getElementById('input-val')
      var imgel = document.getElementById('imgtouch')
      var right = imgel.clientWidth - divinput.getBoundingClientRect().left - this.value.length * 21
      var widthbox = imgel.clientWidth - divinput.getBoundingClientRect().left
      if (right > 0) {
        divcontent.style.width = this.value.length * 21 + 'px'
        divinput.style.width = this.value.length * 21 + 'px'
        inputval.style.width = this.value.length * 21 + 'px'
      } else if (right < 0) {
        divcontent.style.width = widthbox + 'px'
        divinput.style.width = widthbox + 'px'
        inputval.style.width = widthbox + 'px'
      }
    },
    choosecolor () {
      this.show2 = !this.show2
    },
    colorevent (index) {
      if (index === 0) {
        this.stylecol = this.stylecolor[0].a
      }
      if (index === 1) {
        this.stylecol = this.stylecolor[0].b
      }
      if (index === 2) {
        this.stylecol = this.stylecolor[0].c
      }
      if (index === 3) {
        this.stylecol = this.stylecolor[0].d
      }
      if (index === 4) {
        this.stylecol = this.stylecolor[0].e
      }
      if (index === 5) {
        this.stylecol = this.stylecolor[0].f
      }
      if (index === 6) {
        this.stylecol = this.stylecolor[0].j
      }
      if (index === 7) {
        this.stylecol = this.stylecolor[0].k
      }
      this.show2 = false
    },
    WXsharecontent () {
      var sharetitle, sharedesc, shareParams
      if (this.addJson.partnername === '' || this.addJson.partnername === null || this.addJson.partnername === undefined) {
        sharetitle = '贷款让你快速拿到钱'
      } else {
        sharetitle = this.addJson.partnername
      }
      if (this.addJson.imagedesc === '' || this.addJson.imagedesc === null || this.addJson.imagedesc === undefined) {
        sharedesc = '海量借款平台任意选，简单、快速、安全！'
      } else {
        sharedesc = this.addJson.imagedesc
      }
      if (this.partnerIdempty !== '' && this.partnerIdempty !== undefined && this.partnerIdempty !== null) {
        shareParams = '?shareParam=share&userId=' + this.$store.state.userID + '&partnerId=' + this.partnerIdempty + '&picId=' + this.img_id
      } else {
        shareParams = '?shareParam=share&userId=' + this.$store.state.userID + '&picId=' + this.img_id
      }
      var shareimg = this.backlogoUrl
      var shareUrl = this.$store.state.Url + '/picture/detail'
      this.$store.commit('changeIndexConf', {
        shareTitle: sharetitle,
        shareDesc: sharedesc,
        shareImg: shareimg,
        shareLink: shareUrl + shareParams
      })
    }
  }
}
</script>
